<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            font-size: 20px;
            background-color: #eff3f5;
            font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        }
        #header{
            width: 1800px;height: 70px;
            border: #eff3f5 1px solid;
            background-color: white;
            margin: 0 auto;
            padding: 0;
        }
        #footer{
            width: 1800px;
            height: 100px;
            border: #eff3f5 1px solid;
            margin: 0 auto;
            padding: 0;
            background-color: white;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }
        .el-dropdown {
            width: 60px;
            height: 45px;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }

        .box-card {
            width: 480px;
        }
        .cardP{
            margin-top: 5px;
            padding: 0;
            font-size: 14px;
        }
        #card{
            background-color: #eff3f5;
            width: 280px;
            height: 315px;
            margin-right: 5px;
            margin-top: 10px;
        }
        #card:hover{
            transition-duration: 0.5s;
            transform: scale(1.05);
        }
        h4{
            font-size: 14px;
            margin: 0;
            position: relative;
            bottom: 8px;
        }
        .SP{
            display: inline-block;
        }




    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header id="header" style="">
            <div style="width: 1480px;height: 70px;margin: 0 auto;">
                <!--导航菜单栏开始-->
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <!--logo-->
                <img src="imgs/logo.png" width="50px" style="float: left">
                <el-menu-item v-for="title in indexTitleArr" :index=title.id style="padding-left: 30px" @click="c(title.id)">
                    {{title.title}}
                </el-menu-item>
                <div style="line-height: 70px;float: right;width: 200px;height: 60px">
                    <i class="el-icon-sunrise-1" style="font-size: 30px;"></i>
                    <i class="el-icon-message" style="font-size: 30px;margin-left: 15px"></i>
                    <!--用户头像-->
                    <!--用户下拉菜单-->
                    <el-dropdown>
                    <span class="el-dropdown-link">
                    <img :src="url" style="height: 33px;position: relative;top: 5px;border-radius: 50%;margin-left: 15px">
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-link :underline="false" @click="">账号设置</el-link>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                账户余额
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-link :underline="false" @click="logout()">退出登录</el-link>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!--用户下拉菜单结束-->
                </div>
                <!--导航菜单结束-->
            </el-menu>
            </div>
        </el-header>
        <el-main id="main">
            <div style="width: 1480px;margin: 0 auto;">
                <!--轮播图开始-->
                <template>
                    <el-carousel  type="card" height="350px" autoplay="true" >
                        <el-carousel-item v-for="banner in bannerArr">
                            <img :src="banner.url" width="100%" height="100%">
                        </el-carousel-item>
                    </el-carousel>
                </template>
                <!--轮播图结束-->
                <!--下拉框开始-->
                <div style="width:1480px;height: 50px">
                    <span class="SP" >
                    <el-dropdown>
                        <el-button round type="primary" style="background-color: #eff3f5;color: #429fff;">
                            首页推荐<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-link :underline="false" @click="ow()">用户发布</el-link>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-link :underline="false" @click="business()">商业发布</el-link>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    </span>
                    <!--下拉框结束-->
                    <!--Main导航开始-->
                    <span class="SP" style="margin-left: 100px"><!--最新发布,我的发布,商业发布-->
                    <span><el-link :underline="false" @click="newest()">最新发布</el-link></span>
                    <span style="margin-left: 30px"><el-link :underline="false" @click="mine()">我的发布</el-link></span>
                    <span style="margin-left: 30px"><el-link :underline="false" @click="house()">好房推荐</el-link></span>
                    </span>
                    <!--Main导航结束-->
                </div>
                <!--发布区域开始-->
                <el-card id="card" shadow="hover" v-for="user in pyq" class="box-card" style="float: left">
                    <a :href="'/detail.html?id='+user.id"><img :src="user.imgUrl" width="270px" height="210px" style="border-radius: 7px;position: relative;right: 15px;bottom: 10px"></a>
                    <h4>{{user.title}}</h4>
                    <p class="cardP" style="font-size: 12px">{{user.simple}}</p>
                    <p class="cardP" style="font-size: 12px;"><img :src="user.url" style="width: 20px;height:20px;border-radius: 50%">{{user.name}}</p>
                </el-card>
                <!--发布区域结束-->
            </div>
        </el-main>
        <el-footer id="footer" >
                <p style="text-align: center;font-size: 15px">当遇到你时，大脑连上CSGO都会掉帧</p>
        </el-footer>
    </el-container>
</div>
</body>
<!--axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                owner:{money:'200'},
                //首页标题数据库
                indexTitleArr:[
                    {title:'首页',id:'1'},
                    {title:"我要投诉",id:'2'},
                    {title:'生活缴费',id:'3'},
                    {title:'名下资产',id:'4'},
                ],
                //商家广告数据库
                bannerArr:[
                    {url:'/text.png'},{url:'/text.png'},{url:'/text.png'},
                ],
                //head轮播图
                noticeArr:[{notice:"今天吃什么"},{notice:"明天吃什么"},{notice:"后天吃什么"},],
                //默认头像
                url:'https://imgavater.ui.cn/avatar/big.png',
                //首页用户卡片
                pyq:[
                    {id:'1',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'2',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'3',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'4',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'5',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'6',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'7',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'8',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'9',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'10',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'11',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'12',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'13',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'14',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                    {id:'15',imgUrl:'/text.png',title:'远山风景',simple:'今天去爬山了',url:'/text.png',name:'小白'},
                ],
                //下拉框右
                mainArr:[{name:'最新发布'},{name:'我的发布'},{name:'商业发布'}],
                activeIndex: '1',
                activeIndex2: '1',
            }
        },
        methods:{
            c(id){
              console.log(id)
            },
            /*用户退出登录*/
            logout(){

                this.$notify({
                    title: '登录信息',
                    message: '已退出',
                    position: 'top-left'
                });
            },
            /*下拉框*/
            /*用户发布*/
            ow(){
                v.$message("用户发布")
            },
            /*商业发布*/
            business(){
                v.$message("商业发布")
            },
            /*最新发布*/
            newest(){
                v.$message("最新发布")
            },
            /*我的发布*/
            mine(){
                v.$message("我的发布")
            },
            /*好房推荐*/
            house(){
                v.$message("好房推荐")
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>